<template>
	<div id="app" v-loading="loading > 0">
		<div class="title">
			帮助中心
			<div class="hadlebox clearfix">
				<div class="handleBtn" @click="addClass">添加分类</div>
				<div class="handleBtn" @click="addArticle">添加文章</div>
			</div>
		</div>
		<template v-if="classList">
			<div>
				<ul class="helpUl clearfix">
					<div class="classItem">
						<li
							class="ell"
							:class="classIndex==index?'active':''"
							v-for="(item,index) in classList"
							:key="index"
							@click="onClickClass(index)"
						>{{item.name}}</li>
					</div>
				</ul>
				<ul class="con_list">
					<li v-for="(item,index) in contentList" :key="index" @click="getArticleContent(item.id)">
						<i></i>
						{{item.title}}
					</li>
				</ul>
			</div>
		</template>

		<el-dialog title="提示" :visible.sync="editDialog" width="600px">
			<el-form label-position="top" @submit.native.prevent>
				<el-form-item label="标题">
					<el-input v-model.trim="articleTitle"></el-input>
				</el-form-item>
			</el-form>
			<el-form label-position="top" style="margin-bottom:0px;" @submit.native.prevent>
				<el-form-item label="内容">
					<div class="editor" id="editor" ref="editor"></div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editDialog = false">取 消</el-button>
				<el-button v-if="dialogType == 1" @click="delArticle">删 除</el-button>
				<el-button type="primary" :loading="submitLoading" @click="articleSubmit">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="提示" :visible.sync="classDialog" width="500px">
			<el-form label-position="top" @submit.native.prevent>
				<el-form-item label="分类名称">
					<el-input v-model.trim="className" @keyup.enter.native="classSubmit"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="classDialog = false">取 消</el-button>
				<el-button v-if="dialogType == 1" @click="delClass">删 除</el-button>
				<el-button type="primary" :loading="submitLoading" @click="classSubmit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import fetch from '@/api/axios';
import Sortable from "sortablejs";
import E from "wangeditor";
export default {
	data() {
		return {
			loading: 0,
			dialogLoading: false,
			submitLoading: false,
			classList: null,
			classIndex: 0,
			contentList: [],

			dialogType: 0,  // 0.新增， 1，编辑
			className: "",
			articleId: 0,
			articleTitle: '',
			articleContent: '',
			editor:null,

			editDialog:false,
			classDialog:false,
		};
	},
	methods: {
		classSubmit(){
			if(this.dialogType == 0){
				this.addClassSubmit();
			}else{
				this.updateClassSubmit();
			}
		},
		articleSubmit(){
			if(this.dialogType == 0){
				this.addArticleSubmit();
			}else{
				this.updateArticleSubmit();
			}
		},
		getClassList(){
			let _this = this;
			this.loading += 1;
			fetch.get('/api/console/user/helper', {
				action: 'list',
				type: 1
			}).then(res=>{
				let data = res.data;
				if(data.code == 0){
					_this.classList = data.data.info;
					_this.initCategoryMove();
					_this.getArticle(_this.classList[0].id);
				}else{
					_this.$message.error(data.message);
				}
			}).catch(err=>{
				_this.$message.error(err);
			}).finally(()=>{
				_this.loading -= 1;
			});
		},
		getArticle(id){
			let _this = this;
			this.loading += 1;
			fetch.get('/api/console/user/helper', {
				action: 'list',
				type: 2,
				id: id
			}).then(res=>{
				let data = res.data;
				if(data.code == 0){
					_this.contentList = data.data.info;
					_this.initCategoryMove();
				}else{
					_this.$message.error(data.message);
				}
			}).catch(err=>{
				_this.$message.error(err);
			}).finally(()=>{
				_this.loading -= 1;
			});
		},
		openEdit(){
			this.editDialog = true;
			this.$nextTick(()=>{
				if(!this.editor){
					this.editor = new E("#editor");
					this.editor.customConfig.menus = ["bold","fontSize","fontName",'italic',"underline",'strikeThrough',"foreColor","backColor","link","justify",'quote',"image",'video',"code"];
					this.editor.create();
				}
			});
		},
		addArticle(){
			this.articleTitle = '';
			this.dialogType = 0;
			this.openEdit();
			setTimeout(()=>{
				this.editor.txt.html('');
			}, 0);
		},
		addArticleSubmit(){
			let _this = this;
			let cid = this.classList[this.classIndex].id;
			if(this.submitLoading){
				return false;
			}
			_this.submitLoading = true;
			fetch.post('/api/console/user/helper', {
				table: 'helper',
				title: this.articleTitle,
				content: this.editor.txt.html(),
				type_id: cid,
				action: 'post'
			}).then(res=>{
				let data = res.data;
				if(data.code == 0){
					_this.editDialog = false;
					_this.$message.success(data.data.info);
					_this.getArticle(cid);
				}else{
					_this.$message.error(data.data.info);
				}
			}).catch(err=>{
				_this.$message.error(err);
			}).finally(()=>{
				_this.submitLoading = false;
			});
		},
		getArticleContent(id){
			let _this = this;
			this.dialogType = 1;
			this.openEdit();
			this.dialogLoading = true;
			this.articleId = id;
			setTimeout(()=>{
				fetch.get('/api/console/user/helper', {
					action: 'detail',
					type: 2,
					id: id
				}).then(res=>{
					let data = res.data;
					if(data.code == 0){
						_this.articleTitle = data.data.info.title;
						_this.editor.txt.html(data.data.info.content);
					}else{
						_this.$message.error(data.message);
					}
				}).catch(err=>{
					_this.$message.error(err);
				}).finally(()=>{
					_this.dialogLoading = false;
				});
			}, 0);
		},
		updateArticleSubmit(){
			let _this = this;
			let cid = this.classList[this.classIndex].id;
			this.dialogType = 1;
			this.openEdit();
			if(this.submitLoading){
				return false;
			}
			this.submitLoading = true;
			fetch.put('/api/console/user/helper', {
				table: 'helper',
				type_id: cid,
				id: this.articleId,
				title: this.articleTitle,
				content: this.editor.txt.html(),
			}).then(res=>{
				let data = res.data;
				if(data.code == 0){
					_this.editDialog = false;
					_this.$message.success(data.data.info);
					_this.getArticle(cid);
				}else{
					_this.$message.error(data.data.info);
				}
			}).catch(err=>{
				_this.$message.error(err);
			}).finally(()=>{
				_this.submitLoading = false;
			});
		},
		delArticle(){
			let _this = this;
			let classId = this.classList[this.classIndex].id;
			this.dialogLoading = true;
			fetch.post('/api/console/user/helper', {
				table: 'helper',
				id: this.articleId,
				action: 'delete'
			}).then(res=>{
				let data = res.data;
				if(data.code == 0){
					_this.editDialog = false;
					_this.contentList = [..._this.contentList.filter(v=>v.id != this.articleId)];
					_this.$message.success(data.data.info);
				}else{
					_this.$message.error(data.data.info);
				}
			}).catch(err=>{
				_this.$message.error(err);
			}).finally(()=>{
				_this.dialogLoading = false;
			});
		},


		addClass() {
			this.className = '';
			this.dialogType = 0;
			this.classDialog = true;
		},
		addClassSubmit(){
			let _this = this;
			if(this.submitLoading){
				return false;
			}
			_this.submitLoading = true;
			fetch.post('/api/console/user/helper', {
				table: 'helper_type',
				name: this.className,
				action: 'post'
			}).then(res=>{
				let data = res.data;
				if(data.code == 0){
					_this.classDialog = false;
					_this.$message.success(data.data.info);
					_this.getClassList();
				}else{
					_this.$message.error(data.data.info);
				}
			}).catch(err=>{
				_this.$message.error(err);
			}).finally(()=>{
				_this.submitLoading = false;
			});
		},
		onClickClass(index){
			if(index == this.classIndex){
				this.dialogType = 1;
				this.className = this.classList[index].name;
				this.classDialog = true;
				return;
			}
			this.classIndex = index;
			this.getArticle(this.classList[index].id);
		},
		updateClassSubmit(){
			let _this = this;
			let classId = this.classList[this.classIndex].id;
			let oldClassName = this.classList[this.classIndex].name;

			if(oldClassName == this.className){
				this.$message.success('修改成功');
				_this.classDialog = false;
				return false;
			}

			if(this.submitLoading){
				return false;
			}

			this.submitLoading = true;
			fetch.put('/api/console/user/helper', {
				table: 'helper_type',
				type_id: classId,
				name: this.className
			}).then(res=>{
				let data = res.data;
				if(data.code == 0){
					_this.$set(_this.classList[this.classIndex],'name', _this.className);
					_this.classDialog = false;
					_this.$message.success(data.data.info);
				}else{
					_this.$message.error(data.data.info);
				}
			}).catch(err=>{
				_this.$message.error(err);
			}).finally(()=>{
				_this.submitLoading = false;
			});
		},
		delClass(){
			let _this = this;
			let classId = this.classList[this.classIndex].id;
			this.dialogLoading = true;
			fetch.post('/api/console/user/helper', {
				table: 'helper_type',
				id: classId,
				action: 'delete'
			}).then(res=>{
				let data = res.data;
				if(data.code == 0){
					_this.classDialog = false;
					_this.classIndex = _this.classIndex == 0 ? 0 : _this.classIndex - 1;
					_this.classList = [..._this.classList.filter(v=>v.id != classId)];
					_this.getArticle(_this.classList[_this.classIndex].id);
					_this.$message.success(data.data.info);
				}else{
					_this.$message.error(data.data.info);
				}
			}).catch(err=>{
				_this.$message.error(err);
			}).finally(()=>{
				_this.dialogLoading = false;
			});
		},
		resortClassList(list){
			let formData = [];
			let len = list.length;
			list.forEach((v, k)=>{
				formData.push({
					sort: len-k,
					id: v.id
				})
			});
			fetch.put('/api/console/user/helper',{
				table: 'helper_type_sort',
				sort: formData
			}).then(res=>{
				let data = res.data;
				if(data.code !== 0){
					this.$message.error(data.message);
				}
			}).catch(err=>{
				this.$message.error('网络连接失败，请稍后重试');
			});
		},
		resortArticleList(list){
			let formData = [];
			let len = list.length;
			list.forEach((v, k)=>{
				formData.push({
					sort: len-k,
					id: v.id
				})
			});
			fetch.put('/api/console/user/helper',{
				table: 'helper_sort',
				sort: formData
			}).then(res=>{
				let data = res.data;
				if(data.code !== 0){
					this.$message.error(data.message);
				}
			}).catch(err=>{
				this.$message.error('网络连接失败，请稍后重试');
			});
		},
		initCategoryMove(){
			let _this = this;
			_this.className = _this.classList[_this.classIndex].name;

			_this.$nextTick(function() {
				//配置分类和内容  2个列表的拖动
				Sortable.create(document.querySelector(".helpUl .classItem"), {
					onEnd: function(e) {
						var clonedItems = _this.classList.filter(function(item) {
							return item;
						});
						clonedItems.splice(e.newIndex,0,clonedItems.splice(e.oldIndex, 1)[0]);
						_this.classList = [];
						_this.resortClassList(clonedItems);
						_this.$nextTick(function() {
							if(e.oldIndex == _this.classIndex){
								_this.classIndex = e.newIndex;
							}else{

							}
							_this.classList = clonedItems;
						});
					}
				});

				Sortable.create(document.querySelector(".con_list"), {
					onEnd: function(e) {
						var clonedItems = _this.contentList.filter(function(item) {
							return item;
						});
						clonedItems.splice(
							e.newIndex,
							0,
							clonedItems.splice(e.oldIndex, 1)[0]
						);
						_this.contentList = [];
						_this.resortArticleList(clonedItems);
						_this.$nextTick(function() {
							_this.contentList = clonedItems;
						});
					}
				});
			});
		},
	},
	mounted() {
		this.getClassList();

	},
	watch:{
		classList(newName, oldName){
			let _this = this;
			for(var i in _this.classList){
					if(_this.classList[i].name == _this.className){
						_this.classIndex = i;
					}
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.helpUl {
	li{
		float: left;
		border-radius: 3px;
		margin-right: 20px;
		margin-bottom: 20px;
		padding: 0 19px;
		line-height: 32px;
		height: 34px;
		font-size: 15px;
		border: 1px solid #eee;
		color: #666;
		cursor: pointer;
		&.active {
			background: linear-gradient(to right, #6eb5ff, #409efe);
			color: #fff;
			border: 1px solid #409efe;
		}
	}
	
}
.hadlebox{
	float:right;
	.handleBtn {
		float: left;
		margin-left: 35px;
		font-size: 15px;
		line-height:30px;
		color: #333;
		cursor: pointer;
	}
}
.con_list {
	li {
		text-align: left;
		height: 42px;
		line-height: 40px;
		border-bottom: 1px solid #f9f9f9;
		font-size: 15px;
		color: #666;
		margin-bottom: 10px;
		cursor: pointer;
		i {
			vertical-align: middle;
			display: inline-block;
			width: 4px;
			height: 4px;
			border-radius: 50%;
			background: #333;
			margin-right: 10px;
			margin-top: -2px;
		}
	}
}
.editor {
		width: 100%;
		height: 250px;
		overflow: hidden;
		.w-e-text-container{
				height:200px;
		}
}
</style>